@page "/circular-gauge/apple-watch-rings"

@using Syncfusion.Blazor.CircularGauge

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample resembles the appearance of Apple watch rings. This functions similarly to an activity tracker that denotes the move, exercise, and stand details. </p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to make the circular gauge look like the Apple watch rings. Ranges are rendered with rounded corners and annotations are placed to denote the move, exercise, and stand values.</p>
   <p> More information on the annotation can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/annotations'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section" align="center">
    <div class="row">
        <div class="cols-sample-area" align="center">
            <div class="col-lg-9 col-md-9" style="margin-left: -5%">
                <SfCircularGauge Width="400px" Height="400px">
                    <CircularGaugeAxes>
                        <CircularGaugeAxis StartAngle="0" EndAngle="360" Minimum="0" Maximum="100">
                            <CircularGaugeAnnotations>
                                <CircularGaugeAnnotation Angle="3" Radius="85%" ZIndex="1">
                                    <ContentTemplate>
                                        <div>
                                            <img class="imagePosition" src="images/circular-gauge/image1.svg" />
                                        </div>
                                    </ContentTemplate>
                                </CircularGaugeAnnotation>
                                <CircularGaugeAnnotation Angle="6" Radius="60%" ZIndex="1">
                                    <ContentTemplate>
                                        <div><img class="imagePosition" src="images/circular-gauge/image2.svg" /></div>
                                    </ContentTemplate>
                                </CircularGaugeAnnotation>
                                <CircularGaugeAnnotation Angle="10" Radius="38%" ZIndex="1">
                                    <ContentTemplate>
                                        <div ><img class="imagePosition" src="images/circular-gauge/image3.svg" /></div>
                                    </ContentTemplate>
                                </CircularGaugeAnnotation>
                            </CircularGaugeAnnotations>
                            <CircularGaugeAxisLineStyle Width="0.01"/>
                            <CircularGaugeAxisLabelStyle Position="Position.Inside" UseRangeColor="true">
                                <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                            </CircularGaugeAxisLabelStyle>
                            <CircularGaugeAxisMajorTicks Height="0.01"/>
                            <CircularGaugeAxisMinorTicks Height="0.01"/>
                            <CircularGaugeRanges>
                                <CircularGaugeRange Start="0" End="100" Radius="90%" StartWidth="40" EndWidth="40" Color="#E30219" Opacity="0.2"/>
                                <CircularGaugeRange Start="0" End="100" Radius="68%" StartWidth="40" EndWidth="40" Color="#3EDE00" Opacity="0.2"/>
                                <CircularGaugeRange Start="0" End="100" Radius="46%" StartWidth="40" EndWidth="40" Color="#18F8F6" Opacity="0.2"/>
                            </CircularGaugeRanges>
                            <CircularGaugePointers>
                                <CircularGaugePointer RoundedCornerRadius="25" Value="65" Type="PointerType.RangeBar" Radius="90%" Color="#E2011A" PointerWidth="40">
                                    <CircularGaugePointerAnimation Enable="true"/>
                                </CircularGaugePointer>
                                <CircularGaugePointer RoundedCornerRadius="25" Value="43" Type="PointerType.RangeBar" Radius="68%" Color="#3FE000" PointerWidth="40">
                                    <CircularGaugePointerAnimation Enable=true/>
                                </CircularGaugePointer>
                                <CircularGaugePointer RoundedCornerRadius="25" Value="58" Type="PointerType.RangeBar" Radius="46%" Color="#00C9E6" PointerWidth="40">
                                    <CircularGaugePointerAnimation Enable="true"/>
                                </CircularGaugePointer>
                            </CircularGaugePointers>
                        </CircularGaugeAxis>
                    </CircularGaugeAxes>
                </SfCircularGauge>
            </div>
            <div class="col-lg-3 col-md-3" style="margin-left: -9%">
                <div class="panel" align="center" style="width:100%">
                    <div class="panelAlign">
                        <SfCircularGauge Height="65px" Width="65px">
                            <CircularGaugeAxes>
                                <CircularGaugeAxis StartAngle="0" EndAngle="360" Minimum="0" Maximum="100">
                                    <CircularGaugeAnnotations>
                                        <CircularGaugeAnnotation Angle="-25" Radius="50%" ZIndex="1">
                                            <ContentTemplate>
                                                <div><img style="width:17px;height:17px;" src="images/circular-gauge/image1.svg" /></div>
                                            </ContentTemplate>
                                        </CircularGaugeAnnotation>
                                    </CircularGaugeAnnotations>
                                    <CircularGaugeAxisLineStyle Width="0.01"/>
                                    <CircularGaugeAxisLabelStyle Position="Position.Inside" UseRangeColor="true">
                                        <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                    </CircularGaugeAxisLabelStyle>
                                    <CircularGaugeAxisMajorTicks Height="0.01"/>
                                    <CircularGaugeAxisMinorTicks Height="0.01"/>
                                    <CircularGaugeRanges>
                                        <CircularGaugeRange Start="0" End="100" Radius="100%" StartWidth="8" EndWidth="8" Color="#E30219" Opacity="0.2"/>
                                    </CircularGaugeRanges>
                                    <CircularGaugePointers>
                                        <CircularGaugePointer RoundedCornerRadius="5" Value="65" Type="PointerType.RangeBar" Radius="100%" Color="#E2011A" PointerWidth="8">
                                            <CircularGaugePointerAnimation Enable="true"/>
                                        </CircularGaugePointer>
                                    </CircularGaugePointers>
                                </CircularGaugeAxis>
                            </CircularGaugeAxes>
                        </SfCircularGauge>
                    </div>
                    <div class="content">
                        <span class="firstcontent">MOVE</span>
                        <span class="firstcontent" style="color: #E7092E;">65%</span><br />
                        <span class="secondcontent" style="color: #E7092E;">338/520 CAL</span>
                    </div>
                </div>
                <div class="panel" align="center" style="width:100%">
                    <div class="panelAlign">
                        <SfCircularGauge Height="65px" Width="65px">
                            <CircularGaugeAxes>
                                <CircularGaugeAxis StartAngle="0" EndAngle="360" Minimum="0" Maximum="100">
                                    <CircularGaugeAnnotations>
                                        <CircularGaugeAnnotation Angle="-25" Radius="50%" ZIndex="1">
                                            <ContentTemplate>
                                                <div><img style="width:15px;height:15px;" src="images/circular-gauge/image2.svg" /></div>
                                            </ContentTemplate>
                                        </CircularGaugeAnnotation>
                                    </CircularGaugeAnnotations>
                                    <CircularGaugeAxisLineStyle Width="0.01"/>
                                    <CircularGaugeAxisLabelStyle Position="Position.Inside" UseRangeColor="true">
                                        <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                    </CircularGaugeAxisLabelStyle>
                                    <CircularGaugeAxisMajorTicks Height="0.01"/>
                                    <CircularGaugeAxisMinorTicks Height="0.01"/>
                                    <CircularGaugeRanges>
                                        <CircularGaugeRange Start="0" End="100" Radius="100%" StartWidth="8" EndWidth="8" Color="#3EDE00" Opacity="0.2"/>
                                    </CircularGaugeRanges>
                                    <CircularGaugePointers>
                                        <CircularGaugePointer RoundedCornerRadius="5" Value="43" Type="PointerType.RangeBar" Radius="100%" Color="#3FE000" PointerWidth="8">
                                            <CircularGaugePointerAnimation Enable="true"/>
                                        </CircularGaugePointer>
                                    </CircularGaugePointers>
                                </CircularGaugeAxis>
                            </CircularGaugeAxes>
                        </SfCircularGauge>
                    </div>
                    <div class="content">
                        <span class="firstcontent">EXERCISE</span>
                        <span class="firstcontent" style="color: #52E908;">43%</span><br />
                        <span class="secondcontent" style="color: #52E908;">13/30 MIN</span>
                    </div>
                </div>
                <div class="panel" align="center" style="width:100%">
                    <div class="panelAlign">
                        <SfCircularGauge Height="65px" Width="65px">
                            <CircularGaugeAxes>
                                <CircularGaugeAxis StartAngle="0" EndAngle="360" Minimum="0" Maximum="100">
                                    <CircularGaugeAnnotations>
                                        <CircularGaugeAnnotation Angle="-40" Radius="50%" ZIndex="1">
                                            <ContentTemplate>
                                                <div><img style="width:17px;height:17px;" src="images/circular-gauge/image3.svg" /></div>
                                            </ContentTemplate>
                                        </CircularGaugeAnnotation>
                                    </CircularGaugeAnnotations>
                                    <CircularGaugeAxisLineStyle Width="0.01"/>
                                    <CircularGaugeAxisLabelStyle Position="Position.Inside" UseRangeColor="true">
                                        <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                                    </CircularGaugeAxisLabelStyle>
                                    <CircularGaugeAxisMajorTicks Height="0.01"/>
                                    <CircularGaugeAxisMinorTicks Height="0.01"/>
                                    <CircularGaugeRanges>
                                        <CircularGaugeRange Start="0" End="100" Radius="100%" StartWidth="8" EndWidth="8" Color="#18F8F6" Opacity="0.2"/>
                                    </CircularGaugeRanges>
                                    <CircularGaugePointers>
                                        <CircularGaugePointer RoundedCornerRadius="5" Value="65" Type="PointerType.RangeBar" Radius="100%" Color="#00C9E6" PointerWidth="8">
                                            <CircularGaugePointerAnimation Enable="true"/>
                                        </CircularGaugePointer>
                                    </CircularGaugePointers>
                                </CircularGaugeAxis>
                            </CircularGaugeAxes>
                        </SfCircularGauge>
                    </div>
                    <div class="content">
                        <span class="firstcontent">STAND</span>
                        <span class="firstcontent" style="color: #04CBF3">58%</span><br />
                        <span class="secondcontent" style="color: #04CBF3;">7/12 HR</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .panel {
        width: 70%;
        height: 80px;
        margin-left: 15%;
        margin-top: 12%;
        border-color: lightgray;
        float: left;
        background-color: transparent;
    }
    .content {
        float: left;
        margin-left: 62px;
        margin-top: 6%;
        text-align: left;
        position: absolute;
        width:100%
    }
    .imagePosition{
        width:22px;
        height:22px;
    }
    .firstcontent{
        font-size: 17px;
    }
    .secondcontent{
        font-size: 19px;
    }
    .panelAlign {
        float: left;
        margin-top: 3%
    }
</style>